<template>
	<div class="modifyInfo">
		<div class="model">
			<h2>基本资料</h2>
			<ul>
				<li><span>用户名</span><input type="text" v-model="info.userName" :class="{active:error}" :disabled="isupdate"></li>
				<li><span>手机</span><input type="text" v-model="info.phone" :disabled="isupdate"></li>
				<li><span>邮箱</span><input type="text" v-model="info.email" :disabled="isupdate"></li>
				<li><span>单位</span><input type="text" v-model="organizationName" :disabled="isupdate"></li>
			</ul>
			<div class="sucess">
				<el-button class="update" @click="isupdate = false">修改</el-button>
		    	<el-button class="save" @click="updateInfo()" :disabled="isupdate">保存</el-button>
	    	</div>
		</div>
		<div class="model">
			<h2>修改密码</h2>
			<ul>
				<li><span>原始密码</span><input type="password" v-model="password.oldpw" :disabled="ispassword"></li>
				<li><span>修改密码</span><input type="password" v-model="password.newpw" :disabled="ispassword"></li>
				<li><span>确认密码</span><input type="password" v-model="password.scopw" :disabled="ispassword"></li>
			</ul>
		</div>
		<div class="sucess">
			<el-button class="update" @click="ispassword=false">修改</el-button>
	    	<el-button class="save" @click="savePw" :disabled="ispassword">保存</el-button>
    	</div>
	</div>
</template>
<script>
	export default{
		name:'modifyInfo',
		data(){
			return{
				info:{},
				organizationName:'',
				isupdate:true,
				ispassword:true,
				error:false,
				password:{
					oldpw:'',
					newpw:'',
					scopw:''
				}
			}
		},
		mounted(){
			setTimeout(()=>{
				this.getInfo()
			},1000)
		},
		methods:{
			getInfo(){
				this.$http.get('vrv-monitor-platform-web/user/read/userInfo').then((res)=>{
					this.info=res.body.data
					this.organizationName = res.body.organizationName
					this.$store.commit('personalMes',{
				        name:res.body.data.userName,
				        photo:res.body.data.photo,
								createTime:res.body.data.createTime
				    });
				})
			},
			updateInfo(){
				if(!this.info.userName){
					this.error = true
					this.$message.error('用户名不能为空')
					return
				}
				this.$http.post('vrv-monitor-platform-web/user/update/userInfo',{
					email:this.info.email.trim(),
					phone:this.info.phone.trim(),
					userName:this.info.userName.trim(),
					organizationName:this.organizationName.trim()
				}).then((res)=>{
					if(res.body.success==true){
						this.$message("修改成功")
						this.isupdate = true
						this.getInfo()
					}else{
						this.$message.error(res.body.message)
					}
				})
			},
			// 保存密码
			savePw(){
				if(!this.password.newpw.trim()&&!this.password.scopw.trim()){
					this.$message.error("密码不能为空或者空格")
					return
				}
				if(this.password.scopw.length<6){
					this.$message.error("密码太过于简单")
					return
				}
				if (this.password.newpw!=this.password.scopw) {
					this.$message.error("两次密码输入不一样")
					return
				}
				this.$http.post('vrv-monitor-platform-web/user/update/password',{
					oldPassword:this.password.oldpw.trim(),
					newPassword:this.password.scopw.trim()
				}).then((res)=>{
					if (res.body.success==true) {
						if(res.body.message=='请求成功'){
							this.$message('密码修改成功')
							this.ispassword = true
						}
					}else if(res.body.success==false){
						this.$message(res.body.message)
					}
				})
			}
		}
	}
</script>
<style scoped>
	.modifyInfo .model{
		width: 31rem;
		margin:0 auto;
	}
	.modifyInfo .model h2{
		margin-top: 2rem;
		margin-bottom: 2rem;
		font-size: 14px;
		color: #333;
		letter-spacing: 1px;
	}
	.modifyInfo .model ul,.modifyInfo .model ul li{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.modifyInfo .model ul li{
		margin-bottom: 1.8rem;
	}
	.modifyInfo .model ul li span{
		display: inline-block;
		width: 5rem;
		font-size: 0.88rem;
		color: #333;
	}
	.modifyInfo .model ul li input{
		width: 25rem;
		height: 33px;
		border: 1px solid #5ebde8;
		border-radius: 5px;
		padding: 0 15px;
		box-sizing:border-box;
	}
	.modifyInfo .model ul li input.active{
		border: 1px solid red;
	}
	.modifyInfo .model ul li input:disabled{
		background: transparent;
		border: 1px solid #dcdcdc;
	}
	.sucess{
		text-align: center;
	}
	.sucess button{
		width: 6.25rem;
		margin-right: 2rem
	}
	.update{
		background: #0267cf;
		color: #fff;
		border: none;
	}
	.update span,.save span{
		color: #fff;
	}
	.update:hover,.update:focus{
		color: #fff;
		background: #0a72dd;
	}
	.save{
		background: #eb6100;
		color: #fff;
		border: none;
	}
	.save:hover,.save:focus{
		color: #fff;
		border: none;
		background: #e37a1a;

	}
	
</style>